<template>
  <div>
    <div class="goods">
      <div class="menu-wrapper">
        <ul>
          <li class="menu-li" v-for="(good,index) in goods" :key="index" 
          :class="{current:index === currentIndex}" @click="clickMenuIten(index)">
            <span>
              <img class="menu-icon" :src="good.icon" v-if="good.icon">
              {{good.name}}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper">
        <ul class="foods-ul" ref="foodui">
          <li class="foods-ul-item" v-for="(good,index) in goods" :key="index">
            <h1 class="title">{{good.name}}</h1>
            <ul>
              <li class="foods-list-item" v-for="(food,index) in good.foods" :key="index"  @click="showFood(food)">
                <div class="icon">
                  <img class="foods-img" width="57" height="57" :src="food.icon" alt="">
                </div>
                <div class="detail">
                  <div class="foods-detail">
                    <h1 class="foods-name">{{food.name}}</h1>
                    <span class="foods-type" v-if="food.description">{{food.description}}</span>
                    <div class="foods-ratings ratings">
                      <span>月售{{food.sellCount}}份</span>
                      <span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="foods-price">￥{{food.price}}</div>
                  </div>
                  <div class="cartcontrol">
                    <cart-control :food="food"></cart-control>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <shop-cart></shop-cart>
    </div>
    <Food :food="food" ref="foodComponent"></Food>
  </div>
</template>

<script>
import ShopCart from '../../../components/ShopCart/ShopCart.vue'
import Food from '../../../components/Food/Food.vue'
import CartControl from'../../../components/CartControl/CartControl.vue'
import BScroll from '@better-scroll/core'
import {mapState} from 'vuex'
export default {
  components:{
    CartControl,
    Food,
    ShopCart,
  },
  data () {
    return {
      //右侧滑动过程中实时变化的Y周坐标
      scrollY:0,
      //右侧所有分类li的top坐标组成的数组
      tops:[],
      food:{},
    }
  },
  mounted(){
    this.$store.dispatch('getGoods',() => {
      this.$nextTick(() => {
        
        this._initScroll()
        this._initTopscroll()
      })
    })
  },
  computed:{
    ...mapState(['goods']),
    currentIndex(){
      const {scrollY,tops} = this
      const index = tops.findIndex((top,index) => {
        return scrollY>=top && scrollY<tops[index+1]
      })
      return index
    }
  },
  methods:{
    _initScroll(){
      new BScroll('.menu-wrapper',{
        click:true
      })
      this.foodScroll =  new BScroll('.foods-wrapper',{
        probeType:2,
        click:true
      })
      this.foodScroll.on('scroll',({x,y})=>{
        //console.log(x,y)
        this.scrollY = Math.abs(y)
        
      })
      this.foodScroll.on('scrollEnd',({x,y})=>{
        //console.log(x,y)
        this.scrollY = Math.abs(y)
        
      })
    },
    _initTopscroll(){
      const tops = []
      let top = 0
      tops.push(top)
      const lis = this.$refs.foodui.children
      //lis是一个伪数组，需要将它变成真数组
      Array.prototype.slice.call(lis).forEach(li => {
        top += li.clientHeight
        tops.push(top)
      });
      this.tops = tops
      console.log(tops)
    },
    clickMenuIten(index){
      const y = -this.tops[index]
      this.foodScroll.scrollTo(0,y,300)
    },
    showFood(food){
      this.food = food
      this.$refs.foodComponent.toggleShow()
    }
  }
}
</script>

<style lang="less" scoped>
.goods{
  display: flex;
  overflow: hidden;
  top:200px;
  bottom: 46px;
  width:100%;
  background: #fff;
  .menu-wrapper{
    flex: 0 0 80px;
    width: 80px;
    height: 426px;
    background: #f3f5f7;
    .menu-li{
      
      display: table;
      height: 54px;
      width: 56px;
      padding: 0 12px;
      line-height: 14px;
      border-bottom: 1px solid lightgray;
      &.current{
        z-index: 10;
        background: #fff;
        color: rgb(7, 17, 27);;
        font-weight: 700;
      }  
      span{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        .menu-icon{
          width: 12px;
          height: 12px;
          display: inline-block;
          vertical-align: top;
          margin-right: 2px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
        }
      }

    }
  }
  .foods-wrapper{
    flex: 1;
    height: 426px;
    .foods-ul{
      .foods-ul-item{
        .title{
          padding-left: 14px;
          height: 26px;
          line-height: 26px;
          border-left: 2px solid #d9dde1;
          font-size: 12px;
          color: rgb(147, 153, 159);
          background: #f3f5f7;
        }
        .foods-list-item{
          display: flex;
          margin: 18px;
          padding-bottom: 18px;
          border-bottom: 1px solid lightgray;
          .icon{
            flex: 0 0 57px;
            margin-right: 10px;
          }
          .detail{
            display: flex;
            width: 100%;
            position: relative;
            .foods-detail{
              flex: 2;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .foods-name{
                margin: 2px 0 8px 0;
                height: 14px;
                line-height: 14px;
                font-size: 14px;
                color: rgb(7, 17, 27);
              }
              .foods-type{
                margin: 1px 0 6px 0;
                height: 14px;
                line-height: 14px;
                font-size: 13px;
                color: rgb(128, 128, 129);
              }
              .foods-ratings{
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-top: 5px;
                height: 14px;
                line-height: 14px;
                font-size: 13px;
                color: rgb(128, 128, 129);
                span:first-child{
                  padding-bottom: 2px;
                }
              }
              .foods-price{
                color: red;
                height: 14px;
                line-height: 14px;
                font-size: 15px;
                padding-top: 10px;
              }
            }
            .cartcontrol{
              position: absolute;
              flex: 1;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>